// OpenPerformanceModal  履约记录编辑
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Form, Input, Spin, message } from 'antd';
import { Ref, useRef } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { ContractManageAPI } from '../common/type';
import { onCloseModalCommon } from '@/utils';
import { UploadFormCommon } from '@/components/UploadForm';
import { finishProcessService } from '../services';

export const OpenPerformanceModal: React.FC<ContractManageAPI.IOpenPerformanceModal> = ({ onClose, selectRowInfo, reloadManage }) => {
  /** 表单 */
  const [form] = Form.useForm();

  /** 弹框Ref */
  const performanceModalRef: Ref<IOneModalRef> = useRef(null);

  const callback = (res) => {
    if (res && res?.msgFlag) {
      onCloseModalCommon(performanceModalRef);
      reloadManage();
    } else {
      message.error(res?.msg);
    }
  };

  const { finishProcessRun, finishProcessLoading } = finishProcessService(callback);

  /** 保存履约记录 */
  const onSave = () => {
    form?.validateFields()?.then((values: any) => {
      finishProcessRun({ ...values, id: selectRowInfo.id, versionNum: selectRowInfo.versionNum, payState: 3 });
    });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={performanceModalRef}
        title={'确认完成'}
        width={document.body.clientWidth * 0.6}
        onCancel={onClose}
        bodyStyle={{
          padding: '5px 10px',
        }}
        onOk={onSave}
        confirmLoading={finishProcessLoading}
      >
        <Spin spinning={finishProcessLoading}>
          <div className={pageStyles['fromView-styles']}>
            <Form form={form}>
              <Form.Item
                label={'完成情况说明'}
                name={'finishExplain'}
                rules={[
                  {
                    required: true,
                    message: `请输入完成情况说明`,
                  },
                ]}
              >
                <Input.TextArea placeholder={`请输入完成情况说明`} showCount maxLength={800} autoSize={{ minRows: 5, maxRows: 5 }} />
              </Form.Item>

              <UploadFormCommon
                form={form}
                fileFormName={'attachURL'}
                spanCol={24}
                inRowProportion={24}
                name={'attachFile'}
                label="佐证材料"
                required={true}
                accept={'.jpg|.png|.jpeg|.pdf'}
                url={'/contractController/uploadFile'}
                downloadUrl={'/contractController/downloadFile'}
                fileFormDelName={'attachURLDel'}
                delFunc={() => {}}
                maxFile={5}
                // defaultFiles={qualifiCheckRows && JSON.stringify(qualifiCheckRows) != '{}' ? qualifiCheckRows?.attachURL : null}
                defaultFiles={null} //模拟数据-王志龙
              >
                上传
              </UploadFormCommon>
            </Form>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
